<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<meta name="decorator" content="common" />
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> 
	<style type="text/css">
	.item_img .vel_centers{
		position: static;
	}
	</style>
	<script type="text/javascript">
	$(function(){
		sumAccount()
		selectShop()
		selectAll()
	    $('.shop_num').change(function(){
	    	if(!($(this).val()>0)){
	    		$(this).val(1)
	    		$('#jdTkChangeNumBox').show();
	    		changeNum($(this).val(),$(this).attr('shoppingCartGoodsId'));
	    		sumAccount();
	    		return false;
	    	}
	    	if($(this).val().indexOf('.') > -1){
	    		$('#checkShowBoxSpan').text('数量需为整数');
	    		$(this).val(1)
	    		$('#checkShowBox').show();
	    		changeNum($(this).val(),$(this).attr('shoppingCartGoodsId'));
	    		sumAccount();
	    		return false;
	    	}
	    	changeNum($(this).val(),$(this).attr('shoppingCartGoodsId'));
			sumAccount();
		})
		
		$('.item_amout').find('.plus').click(function(){
			var index=$(this).parents('.item_amout').find('.plus').index($(this));
			if(index ==0){
				$(this).next('input').val(parseInt($(this).next('input').val())-1);
				if($(this).next('input').val()<1){
					$(this).next('input').val(1);
		    		$('#jdTkChangeNumBox').show();
		    		return false;
				}
				changeNum($(this).next('input').val(),$(this).next('input').attr('shoppingCartGoodsId'));
			}else{
				$(this).prev('input').val(parseInt($(this).prev('input').val())+1);
				changeNum($(this).prev('input').val(),$(this).prev('input').attr('shoppingCartGoodsId'));
			}
			sumAccount()
		})
		
		$('.search_chose').click(function(){
			if($(this).hasClass('search_chose_hover')){
				$(this).removeClass('search_chose_hover');
				if($(this).hasClass('search_chose_shop')){
					changeCheck($(this).attr('shopcode'),'shop_list','cancel');
				}else if($(this).hasClass('search_chose_all')){
					changeCheck('','all_list','cancel');
				}else{
					changeCheck($(this).attr('shoppingcart'),'one','cancel');
					selectShop();
					selectAll();
				}
			}else{
				$(this).addClass('search_chose_hover');
				if($(this).hasClass('search_chose_shop')){
					changeCheck($(this).attr('shopcode'),'shop_list','check');
				}else if($(this).hasClass('search_chose_all')){
					changeCheck('','all_list','check');
				}else{
					changeCheck($(this).attr('shoppingcart'),'one','check');
					selectShop();
					selectAll();
				}
			}
			sumAccount()
		})
		
		$('.search_chose_shop').click(function(){
		
			if($(this).hasClass('search_chose_hover')){
				$(this).parents('.shopping_car_list').find('.search_chose').addClass('search_chose_hover');
			}else{
				$(this).parents('.shopping_car_list').find('.search_chose').removeClass('search_chose_hover');
			}
			sumAccount()
			selectAll()
		})
		
		$('.all_select .search_chose').click(function(){
			if($(this).hasClass('search_chose_hover')){
				$('.search_chose').addClass('search_chose_hover');
			}else{
				$('.search_chose').removeClass('search_chose_hover');
			}
			sumAccount()
		})
		
	})
	
	function sumAccount(){
		$('.shopping_car_list').each(function(kk,vv){
			var sum_accont=0
			$(vv).find('.shop_num').each(function(k,v){
				if($(v).parents('.shopping_car_item_a').find('.shop_num').length>0){
					var price=parseFloat($(v).parents('.shopping_car_item_a').find('.price_value').text());
					var num=parseInt($(v).parents('.shopping_car_item_a').find('.shop_num').val());
					sum_price=price*num;
               		if($(v).parents('.shopping_car_item_a').find('.search_chose').hasClass('search_chose_hover')){
						sum_accont+=sum_price;
					}
					sum_price=sum_price.toFixed(2);
					$(v).parents('.shopping_car_item_a').find('.sum_price').text(sum_price);
				}
			})
			$(vv).find('.sum_accont').text(sum_accont.toFixed(2))
		})
	}
	var that
	var deleteblock
	$(function(){
		$(".Invalid_title").click(function(){
			$('.jd_tk_del_box').show();
			that=$(this).parents(".Invalid_box");
			deleteblock=1;
		});
		$(".del_list").click(function(){
			var allNum = $(this).parents('.shopping_car_list').find('.shopping_car_item').find('.search_chose_hover').length;
			if(allNum==0){
				$('#jdTkChoseBox').show();
			}else{
				$('.jd_tk_del_box').show();
				that=$(this).parents(".shopping_car_list")
				deleteblock=0;
			}
		})
		$('.cancle').on('click',function(){
	        $('.jd_tk').hide();
	    })
	    $('#delet_box_submit').on('click',function(){
	    	var deleteGoodsIds = '';
	    	if(deleteblock>0){
	    		//删除失效商品
	    		$.ajax({
	    			url:"${ctxWeb}/shoppingCart/deleteInvalidGoods",
	    			async:false
	    		});
	    		that.remove();
	    		$('#deleteInvalidGoods').submit();
	    	}else{
            	var deleteNum = 0;
            	var allNum = that.find('.shopping_car_item').find('.search_chose').length;
           		that.find('.shopping_car_item').find('.search_chose_hover').each(function(k,v){
           			deleteNum++;
           			deleteGoodsIds += $(v).attr('shoppingcart')+',';
   					$(v).parents('.shopping_car_item_a').remove();
   				})
   				if(allNum==deleteNum){
   					that.remove();
   				}
   				deleteGoodsIds = deleteGoodsIds.substring(0,deleteGoodsIds.length-1);
           		$('#deleteGoods').val(deleteGoodsIds);
	    		$.ajax({
	    			url:"${ctxWeb}/shoppingCart/deleteGoods",
	    			data:{'shoppingCartIds':deleteGoodsIds},
	    			async:false
	    		});
	    		if($('.shopping_car_list').length == 0){
	    			$('#noShoppingCart').show();
	    		}
			}
		    $('.jd_tk').hide();
		})
	})
    function jdTkInvalidBoxClose(){
		$('#jdTkInvalidBox').hide();
	}
    function jdTkChoseBoxClose(){
		$('#jdTkChoseBox').hide();
	}
    function jdTkChangeNumClose(){
    	$('#jdTkChangeNumBox').hide();
    }
	function settlement(e){
		var length = $(e).parents('.shopping_car_item').find('.search_chose').hasClass('search_chose_hover').length;
		var ids = '';
		$(e).parents('.shopping_car_item').find('.search_chose').each(function(k,v){
			if($(v).hasClass('search_chose_hover')){
				ids += $(v).attr('shoppingCartId')+',';
			}
		})
	}
	function goSettlement(e){
		var ids = '';
		var storeCode = '';
		$(e).parents('.shopping_car_list ').find('.shopping_car_item').find('.search_chose').each(function(k,v){
			if($(v).hasClass('search_chose_hover')){
				ids += $(v).attr('shoppingcart')+',';
			}
		})
		storeCode = $(e).parents('.shopping_car_list').find('.shopping_car_list_tit').find('.search_chose_shop').attr('shopcode')
		if(ids!=''){
			ids=ids.substring(0,ids.length-1);
			$('#vipShoppingCartIds').val(ids);
			$('#storeCode').val(storeCode);
			$.ajax({
				url:'${ctxWeb}/shoppingCart/checkInvalid',
				data:{'ids':ids},
				async:false,
				success:function(result){
					if(result=='noInvalid'){
						$("#goSettlementForm").submit();
					}else{
						$('#jdTkInvalidBox').show();
					}
				}
			})
		}else{
			$('#jdTkChoseBox').show();
		}
	}
	function changeCheck(idOrCode,type,checkOrCancel){
    	$.ajax({
			url:"${ctxWeb}/shoppingCart/changeCheck",
			data:{'checkType':type,'idOrCode':idOrCode,'checkOrCancel':checkOrCancel},
			async:false
		});
	}
	function changeNum(goods_num,goods_id){
    	$.ajax({
			url:"${ctxWeb}/shoppingCart/changeNum",
			data:{'goodsNum':goods_num,'id':goods_id},
			async:false
		});	
	}
	function selectAll(){
		//如果有一个勾选框没有勾选，则全选的框不勾选
		var allFlag = true;
		$('.search_chose_shop').each(function(k,v){
			if(!$(v).hasClass('search_chose_hover')){
				allFlag = false;
			}			
		})
		if(allFlag){
			$('.search_chose').addClass('search_chose_hover');
		}else{
			$('.all_select .search_chose').removeClass('search_chose_hover');
		}
		
	}
	function selectShop(){
		//遍历每个shopping_car_list 如果有没有勾选的，门店的勾选框则不勾选
		$('.shopping_car_list').each(function(k,v){
			var shopFlag = true;
			$(v).find('.shopping_car_item').find('.search_chose').each(function(kk,vv){
				if(!$(vv).hasClass('search_chose_hover')){
					shopFlag = false;
				}
			})
			if(shopFlag){
				$(v).find('.search_chose_shop').addClass('search_chose_hover');
			}else{
				$(v).find('.search_chose_shop').removeClass('search_chose_hover');
			}
		})
	}
	function detailFunc(goodsCode,storeCode) {
		window.open( "${ctxWeb}/goodsDetail/list?goodsCode=" + goodsCode+"&storeCode="+storeCode+"&useIp="+returnCitySN["cip"])
	
	}
    </script>
</head>
	<body>
	<!--购物车-->
	<div class=" shopping_car_box">
		<div class="container">
			<div class="row">
				<!--购物车头部-->
				<div class="shopping_car_title">
					<ul class="clearfix col-xs-12 pad0">
					<c:if test="${not empty list}">
						<li class="all_select col-xs-1 pad0">
							<i class="search_chose search_chose_all"></i>
							<span>全选</span>
						</li>
					</c:if>
						<li class=" col-xs-3 text-center">
							<p>商品名称</p>
						</li>
						<li class=" col-xs-2 text-center">
							<p>配件编号</p>
						</li>
						<li class=" col-xs-2 text-center">
							<p>单价</p>
						</li>
						<li class=" col-xs-2 text-center">
							<p>数量</p>
						</li>
						<li class=" col-xs-2 text-center">
							<p>小计</p>
						</li>
					</ul>
				</div>
				<!--购物车头部结束-->
				<!--购物车内容-->
				<c:if test="${not empty list}">
				<c:forEach items="${list}" var="map">
					<div class="shopping_car_list ">
						<div class="shopping_car_list_tit clearfix">
							<figure class="col-xs-1 select_shop pad0">
								<i class="search_chose search_chose_shop" shopCode="${map.storeCode }"></i>
							</figure>
							<figure class="col-xs-9 shop_name pad0">
								<b class="tips">${fns:getDictLabel(map.storeType, 'store_type', '')}</b>
								<span>${map.storeName }</span>
							</figure>
							<figure class="col-xs-2 pad0">
								<a href="javascript:void(0)" class="del_list"></a>
							</figure>
						</div>
						<!--列表-->
						<div class="shopping_car_item clearfix">
							<c:forEach var="shoppingCart" items="${map.shoppingCarts }">
								<div class="col-xs-12 col-sm-12 shopping_car_item_a clearfix">
									<div class="col-sm-1 col-xs-2 single_shop pad0">
										<div class="vel_centers">
										<c:if test="${shoppingCart.isCheck==1 }">
											<i class="search_chose search_chose_hover" shoppingcart="${shoppingCart.id }"></i>
										</c:if>
										<c:if test="${shoppingCart.isCheck==0 }">
											<i class="search_chose" shoppingcart="${shoppingCart.id }"></i>
										</c:if>
										</div>
									</div>
									<div class="col-sm-1 col-xs-2 item_img pad0" onclick="detailFunc('${shoppingCart.goodsCode }','${shoppingCart.storeCode }')">
										<div class="vel_centers">
											<a target="_blank" href="javascript:;" onclick="detailFunc('${shoppingCart.goodsCode }','${shoppingCart.storeCode }')">
												<img src="${ctxWeb}/web/file/getFile?filePath=${shoppingCart.imgList[0] }" alt="" />
											</a>
										</div>
									</div>
									<div class="col-sm-6 col-xs-5 shop_msg_ph pad0">
										<figure class="col-sm-4  item_name pad0">
											<div class="vel_centers">
												<a href="javascript:;" onclick="detailFunc('${shoppingCart.goodsCode }','${shoppingCart.storeCode }')">
												<p>${shoppingCart.goodsName }</p>
												</a>
											</div>
										</figure>
										<figure class="col-sm-4 text-center  pad0">
											<div class="vel_centers">
												<p>${shoppingCart.goodsCode }</p>
											</div>
										</figure>
										<figure class="col-sm-4 text-center shop_price pad0">
											<div class="vel_centers">
											<c:choose>  
											   	<c:when test="${yongUser.userType==2 and shoppingCart.vipPrice!=null}">
											   		<p>¥ <span class='price_value'>${shoppingCart.vipPrice }</span></p>
											   	</c:when>  
												<c:otherwise>
											   		<p>¥ <span class='price_value'>${shoppingCart.goodsPrice }</span></p>
												</c:otherwise>  
											</c:choose>
											</div>
										</figure>
									</div>
									<div class="col-sm-2 col-xs-5 ph_number text-center pad0">
										<div class="vel_centers">
												<p class="item_amout">
													<a href="javascript:void(0);" class="plus">-</a>
													<input type="number" value="${shoppingCart.goodsNum }" shoppingCartGoodsId="${shoppingCart.id }" class="num shop_num count">
													<a href="javascript:void(0);" class="plus">+</a>
												</p>
											</div>
									</div>
									<div class="col-sm-2 item_totle text-center  pad0">
										<div class="vel_centers">
											<p>¥ <span class='sum_price'>0.00</span></p>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
						<div class="shopping_car_price">
							<span>总计：¥<span class='sum_accont'></span></span>
							<a href="#" onclick="goSettlement(this)">结算</a>
						</div>
					</div>
				</c:forEach>
					<!--列表结束-->
				</c:if>
				<div class="container" id="noShoppingCart" <c:if test="${not empty list }"> style="display:none"</c:if>>
					<div class="row">
						<div class="success_box error_sb_box">
							<h3 class="font-sm18">购物车暂无商品,<a class="go_rz" style="color:red" href="${ctxWeb }/goodsList/list">去购买</a></h3>
						</div>
					</div>
				</div>
				<!--购物车内容结束-->
				<!--失效内容-->
				<c:if test="${fn:length(invalidList)>0 }">
				<div class="Invalid_box">
					<h3 class="Invalid_title">清空失效商品</h3>
					<div class="shopping_car_list">
						<!--列表-->
						<c:forEach items="${invalidList }" var="invalidGoods">
						<div class="shopping_car_item clearfix">
							<div class=" shopping_car_item_a col-xs-12">
								<div class="col-sm-1 col-xs-2 col-sm-offset-1 item_img pad0">
									<div class="vel_centers">
										<a href="javascript:void(0)">
											<img src="${ctxWeb}/web/file/getFile?filePath=${invalidGoods.imgList[0] }" alt="" />
										</a>
										<c:choose>
											<c:when test="${invalidGoods.isGoodsDel==1}">
												<p class="pos_goods">商品不存在</p>
											</c:when>
											<c:when test="${invalidGoods.goodsStock==0}">
												<p class="pos_goods">暂时无货</p>
											</c:when>
											<c:otherwise>
												<p class="pos_goods">商品已下架</p>
											</c:otherwise>
										</c:choose>
									</div>
								</div>
								<div class="col-sm-6 col-xs-5 shop_msg_ph pad0">
									<figure class="col-sm-4  item_name pad0">
										<div class="vel_centers">
											<p>${invalidGoods.goodsName }</p>
										</div>
									</figure>
									<figure class="col-sm-4 text-center  pad0">
										<div class="vel_centers">
											<p>${invalidGoods.goodsCode }</p>
										</div>
									</figure>
									<figure class="col-sm-4 text-center shop_price pad0">
										<div class="vel_centers">
											<p>¥ <span class='price_value'>${invalidGoods.goodsPrice }</span></p>
										</div>
									</figure>
								</div>
							</div>
						</div>
						</c:forEach>
						<!--列表结束-->
					</div>
				</div>
				</c:if>
				<!--失效内容结束-->
			</div>
		</div>
	</div>
	<!--购物车结束-->	
	<!--foot结束-->
	<!--弹框-->
		<div class="jd_tk jd_tk_del_box" style="display: none;">
		    <div class="delet_box">
		        <div class="jd_win_tit">你确定删除该商品吗？</div>
		        <div class="jd_btn clearfix">
		            <a href="javascript:void(0)" class="cancle">取消</a>
		            <a href="javascript:void(0)" class="submit" id="delet_box_submit">确定</a>
		        </div>
		    </div>
		</div>
		<div id="jdTkInvalidBox" class="jd_tk" style="display: none;">
		    <div class="delet_box">
		        <div class="jd_win_tit">购物车中有失效商品，请刷新页面</div>
		        <div class="jd_btn clearfix">
		            <a href="javascript:void(0)" onclick="jdTkInvalidBoxClose()" class="submit" style="width:90%">确定</a>
		        </div>
		    </div>
		</div>
		<div id="jdTkChoseBox" class="jd_tk" style="display: none;">
		    <div class="delet_box">
		        <div class="jd_win_tit">请至少选择一件商品</div>
		        <div class="jd_btn clearfix">
		            <a href="javascript:void(0)" onclick="jdTkChoseBoxClose()" class="submit" style="width:90%">确定</a>
		        </div>
		    </div>
		</div>
		<div id="jdTkChangeNumBox" class="jd_tk" style="display: none;">
		    <div class="delet_box">
		        <div class="jd_win_tit">商品数量应大于0</div>
		        <div class="jd_btn clearfix">
		            <a href="javascript:void(0)" onclick="jdTkChangeNumClose()" class="submit" style="width:90%">确定</a>
		        </div>
		    </div>
		</div>
		<form action="${ctxWeb}/shoppingCart/goSettlement" id="goSettlementForm" method="post">
			<input name="shoppingCartIds" id="vipShoppingCartIds" type="hidden">
			<input name="storeCode" id="storeCode" type="hidden">
		</form>
	<!--弹框结束-->
	</body>
</html>
